<template>
  <div class="box">
    <!-- 表头 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="formInline.user"
          placeholder="根据用户名搜索"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="" @click="resetInput">清空</el-button>
        <el-button type="primary" @click="searchName(formInline.user)">搜索</el-button>
      </el-form-item>
      <el-button type="success" class="right" @click="showEdit('add')"
        ><i class="el-icon-edit"></i>新增权限组</el-button
      >
  <el-alert
    :title="'共'+`${total}`+'条记录'"
    type="info"
    show-icon>
  </el-alert>

    </el-form>
    <!-- 表格数据 -->
    <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="180">
    </el-table-column>
    <el-table-column
      prop="title"
      label="用户名"
      width="500"
      >
    </el-table-column>
     <el-table-column
      prop="create_date"
      label="日期"
      sortable
      width="500">
    </el-table-column>

      <el-table-column prop="address" label="操作">
        <!-- 子组件插槽 -->
        <template #default="{ row }">
          <div class="actions">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              class="bt1"
              @click="showEdit('edit',row)"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              class="bt2"
              @click="del(row)"
            ></el-button>
          </div>
        </template>
      </el-table-column>
  </el-table>
  <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryObj.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="queryObj.pageSize"
      layout="prev, pager, next,sizes, jumper"
      :total="total"
      background
      class="fpage"
    >
    </el-pagination>
<el-dialog
   :title="alltitles"
   :visible.sync="flag"
   width="30%"
  >
   <el-form label-width="100px" class="demo-ruleForm"
  >
 <el-form-item
 :model="form"
  label="用户名"
  :rules="[
   { required: true, message: '请输入用户名', trigger: 'blur' },
   { min: 3, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
  ]">
  <el-input type="age" v-model="form.title" ></el-input>
 </el-form-item>

</el-form>
<el-tree
 :data="datas"
 show-checkbox
 default-expand-all
 node-key="id"
 ref="tree"
 highlight-current
 :props="defaultProps">
</el-tree>
 <span slot="footer" class="dialog-footer">
  <el-button @click="flag = false">取 消</el-button>
  <el-button type="primary" @click="adddata(text,id)">确 定</el-button>
 </span>
</el-dialog>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/permissions.js'
export default {
  data () {
    return {
      text: 'add',
      flag: false,
      props: {
        label: 'name',
        children: 'zones'
      },
      count: 1,
      dialogVisible: false,
      total: 20,
      formInline: {
        user: '',
        region: ''
      },
      queryObj: {
        page: 1,
        pagesize: 10
      },
      tableData: [{
        date: '2016-05-03',
        username: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-02',
        username: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        username: '王大虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }],
      form: {
        username: ''
      },
      rules: {
        username: []
      },
      multipleSelection: [],
      datas: [{
        id: 1,
        label: '系统菜单和页面权限点',
        children: [{
          id: 2,
          label: 'kkkk',
          children: [{
            id: 3,
            label: 'ggg'
          }, {
            id: 4,
            label: '1111'

          },
          {
            id: 5,
            label: 'jjjj'

          },
          {
            id: 6,
            label: '11'

          }
          ]
        }, {
          id: 7,
          label: '1'

        },
        {
          id: 8,
          label: '1'

        },
        {
          id: 9,
          label: '1'

        },
        {
          id: 10,
          label: 'gbga'

        },
        {
          id: 11,
          label: 'gbgb'

        },
        {
          id: 12,
          label: 'kkkk12'

        }
        ]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },

  created () {
    this.initData()
  },

  methods: {
    // 添加树形结构列表
    handleCheckChange (data, checked, indeterminate) {
      // console.log(data)
      // console.log(checked)
      // console.log(indeterminate)
    },
    handleNodeClick (data) {
      console.log(data)
    },

    // 分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.queryObj.pagesize = val
      this.initData()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.queryObj.page = val
      this.initData()
    },
    // 搜索功能
    searchName (uname) {
      this.tableData = this.tableData.filter(item => item.title === uname)
    },
    // 清空功能
    resetInput () {
      this.formInline.user = ''
      this.initData()
    },
    // 展示dialog
    showEdit (val, id) {
      // console.log(1)
      // this.dialogVisible = true
      this.text = val
      this.id = id
      this.flag = true
    },
    // 封装渲染数据
    async initData () {
      const { data } = await list(this.queryObj)
      // console.log(data)
      data.list.forEach(ele => {
        ele.create_date = ele.create_date.substring(0, 10) + '' + ele.create_date.substring(11, 19)
      })
      this.tableData = data.list
      this.total = data.counts
      // console.log(this.tableData)
    },
    // 删除功能
    async del (id) {
      try {
        await remove(id)
        this.$message.success('删除成功')
        this.initData()
      } catch (error) {
        this.$message.error('删除失败')
      }
    },
    handleSelectionChange (val) {
      // console.log(val)
      this.multipleSelection = val
    }
  },
  computed: {
    alltitles () {
      if (this.text === 'add') return '创建用户'
      if (this.text === 'edit') return '修改用户'
      else {
        return 'add'
      }
    }
  }
}
</script>

<style scoped lang='less'>
.box {
  background-color: #fff;
  padding: 20px 20px 70px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  //编辑、删除按钮样式
  .bt1 {
    background-color: #ecf5ff;
    color: #409eff;
  }
  .bt1:hover {
    background-color: #409eff;
    color: #ecf5ff;
  }
  .bt2 {
    background-color: #ecf5ff;
    color: #f87f92;
  }
  .bt2:hover {
    background-color: #f87f92;
    color: #ecf5ff;
  }
  .right {
    float: right;
  }
  .fpage {
    position: absolute;
    right: 30px;
    bottom: 20px;
  }
}
</style>
